<script setup>
// reactive: 接收一个对象类型的数据，返回一个响应式的对象
// 问题：如果是简单类型，怎么办呢？
/* import { reactive } from 'vue'
const state = reactive({
  count: 100
})
const setCount = () => {
  state.count++
} */

// 2. ref：接收简单类型或复杂类型，返回一个响应式的对象
//    本质：是在原有传入的数据基础上，外层包了一层对象，包成复杂类型
//    底层：包成复杂类型之后，再借助reactive实现响应式
//    注意点：
//    1. 访问数据，需要通过.value
//    2. 在template中，.value不需要添加(帮我们扒了一层)
// 推荐：以后申明数据，统一用 ref => 统一编码规范
import { ref } from 'vue'
const count = ref(0)
console.log(count.value)
const setCount = () => {
  count.value++
}

</script>

<template>
  <div>
    <!-- <div>{{ state.count }}</div>
    <button @click="setCount">+1</button> -->
    <div>{{ count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>
